// 合成事件

// 合成事件对象

import React from "./react";
import ReactDOM from "./react-dom/client";
class ClassComponent extends React.Component {
  parentBubble() {
    console.log("React中父节点冒泡");
  }
  childBubble(event) {
    console.log("React子节点冒泡");
    event.stopPropagation();
  }
  parentCapture(event) {
    console.log("React父节点捕获");
    //阻止事件传播
    //event.stopPropagation();
  }
  childCapture() {
    console.log("React子节点捕获");
  }
  clickLink = (event) => {
    console.log("clickLink");
    //阻止a标签默认跳转行为
    //event.preventDefault();
  };

  /**
   *
   * onClick   冒泡 节点执行
   *
   * onClickCapture 捕获 节点执行
   *
   */
  render() {
    return (
      <div
        id="parent"
        onClick={this.parentBubble}
        onClickCapture={this.parentCapture}
      >
        <button
          id="child"
          onClick={this.childBubble}
          onClickCapture={this.childCapture}
        >
          点击
        </button>
        <a onClick={this.clickLink} href="http://www.baidu.com">
          link
        </a>
      </div>
    );
  }
}
const element = <ClassComponent />;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(element);

setTimeout(() => {
  document.getElementById("root").addEventListener(
    "click",
    () => {
      console.log(`  Native根节点捕获`);
    },
    true // isCAtpture 在捕获阶段执行
  );
  document.getElementById("root").addEventListener(
    "click",
    () => {
      console.log(`  Native根节点冒泡`);
    },
    false // 事件 在冒泡阶段执行
  );
  document.getElementById("parent").addEventListener(
    "click",
    () => {
      console.log(`  Native父节点捕获`);
    },
    true
  );
  document.getElementById("child").addEventListener(
    "click",
    () => {
      console.log(`  Native子节点捕获`);
    },
    true
  );
  document.getElementById("parent").addEventListener("click", () => {
    console.log(`  Native父节点冒泡`);
  });
  document.getElementById("child").addEventListener("click", () => {
    console.log(`  Native子节点冒泡`);
  });
}, 1000);
